<template>
  <div class="recommend">
    <h2>推荐酒店列表</h2>
    <el-row :gutter="20">
      <el-col :span="8" v-for="hotel in recommendHotels" :key="hotel.id">
        <el-card>
          <div class="clearfix">
            <span>{{ hotel.hotelName }}</span>
            <el-button type="text" @click="viewHotelDetails(hotel)">查看详情</el-button>
          </div>
          <div>{{ hotel.hotelAddress }}</div>
          <div>星级：{{ hotel.hotelStar }}</div>
          <div>主题：{{ hotel.hotelTheme }}</div>
          <div>设施：{{ hotel.hotelFacilities }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const recommendHotels = ref([]);

// 查看酒店详情
const viewHotelDetails = (hotel) => {
  // 实现查看详情功能，你可以根据需求进一步扩展
};
</script>

<style scoped>
.recommend {
  padding: 20px;
}

.recommend h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
